<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

    </style>
</head>

<body>
    <p></p>
    <script>
        //2 实现页面中的日期更新功能
        
        function timeFn() {
            var time = new Date()
            var res = time.getFullYear() + "年"  + (time.getMonth()+ 1) + "月" + time.getDate() + "日" + time.getHours() + "时" + time.getMinutes() + "分" + time.getSeconds() + "秒"
            return res 
        }
        var box = document.querySelector("p")
        box.innerHTML = timeFn()
        document.documentElement.style.height = "100%"
        document.documentElement.style.background = "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F61dcb373dd35cb379246c25ae29bafa46d346d26.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661592608&t=1d04b428eeeff57bb893c6a63e4a670f)"
        document.documentElement.style.backgroundSize = "100% 100%"
        document.body.style.height = "100%"
        box.style.display = "flex"
        box.style.justifyContent = "center"
        box.style.paddingTop = "10%"
        box.style.fontSize = "50px"
        box.style.boxSizing = "border-box"
        box.style.height = "100%"
        box.style.color = "rgba(38,65,77,0.7)"
        //定时器        
        setInterval(function(){
            box.innerHTML = timeFn()
        },1000)

    </script>
</body>

</html>